<!--
 * @Author: GKN
 * @Date: 2023-12-08 09:56:12
 * @LastEditTime: 2024-01-15 10:29:01
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\components\fileView.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div>
    <el-row :gutter="20">
        <el-col :span="8" v-for="(item,i) in list" :key="i">
            <div class="file-view cursor-p">
                <fileImg :type="item.fileType?item.fileType:1"/>
                <imgView :src="item[thumb]" />
                <div class="po-ab0 bottom" style="z-index: 100;">
                    <div class="btn-2 hvr-float-shadow" style="margin-right:10px;" @click="amplify(item)">预览</div>
                    <div class="btn-2 hvr-float-shadow" @click="proxy.$comJs.downloadUrl('https://file.xdqycx.com/'+item.file,item.file,id)">下载</div>
                </div>
                <!-- <div class="file-mask" v-if="file_index == i">
                    <el-popover
                        placement="bottom-end"
                        :width="200"
                        trigger="click"
                        :teleported="false"
                    >
                        <template #reference>
                            <div class="more cursor-p">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </template>
                        <div style="width: 160px;" >
                            <div class="font-title cursor-p" style="text-align:center;" @click="amplify(item)">预览查看</div>
                            <div class="font-title cursor-p MarT" style="text-align:center;">下载附件</div>
                        </div>
                    </el-popover>
                </div> -->
            </div>
        </el-col>
    </el-row>
  </div>
  <el-dialog v-model="isshow" title="" width="50%" style="border-radius:15px;padding-bottom:10px;">
    <div style="height: 650px;overflow-y: auto;">
        <div style="min-height: 700px;">
            <imgView :src="imgurl" />
        </div>
    </div>
    
  </el-dialog>
</template>

<script setup>
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from 'crypto-js';
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
    const props = defineProps({
        id:{
            type: Number,
            default: '',
        },
        t1:{
            type: String,
            default: '',
        },
        t2:{
            type: String,
            default: '',
        },
        list:{
            type: Object,
            default: [],
        },
        thumb:{
            type: String,
            default: 'thumb',
        }
    })
    const file_index = ref(-1)
    const enter=(i)=>{
        file_index.value = i
    }
    const leave=(i)=>{
        file_index.value = -1
    }
    const imgurl = ref('')
    const isshow = ref(false)
    // 预览查看
    const amplify=(item)=>{

        // imgurl.value =item[props.thumb]
        // isshow.value = true
        const routeUrl = Router.resolve({
            path:'/animatedly/info',
            query:{
                ob:proxy.$comJs.encry({
                    title:props.t2,
                    id:props.id,
                    path:'/animatedly/list',
                    first_title:props.t1,
                    first_path:-1
                })
            }
        });
        window.open(routeUrl.href, "_blank");
    }
</script>

<style lang='less' scoped>
.file-view{
    height: 538px;
    position: relative;
    box-shadow:0 0 10px rgba(5, 5, 5, 0.2);
    .file-mask{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background:rgba(0,0,0,.3) ;
        display: flex;
        justify-content: flex-end;
        padding: 20px 20px 0 0;
    }
}
.more{
    width: 56px;
    height: 56px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 6px;
    
    div{
        background: #4a505c;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
}
.bottom{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom:15px ;
}
</style>
